<template>
  <!--
      作者：luoyiming
      时间：2020-06-01
      描述：广告-添加
    -->
  <div class="product-add pb50">
    <!--添加广告-->
    <el-form size="small" :model="form" ref="form" label-width="100px">
      <div class="common-form">编辑福利官</div>
      <el-form-item label="福利官名称" prop="name" :rules="[{ required: true, message: '请输入福利官名称' }]">
        <el-input v-model="form.name" placeholder="请输入福利官名称" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="二维码" prop="qr_code" :rules="[{ required: true, message: '请上传图片' }]">
        <div>
          <el-button type="primary" @click="openUpload('qr_code')">上传图片</el-button>
          <img :src="form.qr_code" class="mt10" width="120px" v-if="form.qr_code"/>
          <!--上传图片组件-->
        </div>
      </el-form-item>
      <el-form-item label="背景图" prop="bg_image" :rules="[{ required: true, message: '请上传图片' }]">
        <div>
          <el-button type="primary" @click="openUpload('bg_image')">上传图片</el-button>
          <img :src="form.bg_image" class="mt10" width="120px;" v-if="form.bg_image"/>
        </div>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>

      </div>
    </el-form>
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>

import Upload from '@/components/file/Upload';
import OfficerApi from "@/api/officer.js";
import SupplierApi from "@/api/supplier";
import {formatModel} from "@/utils/base";

export default {
  components: {
    /*图片上传*/
    Upload: Upload,
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      /*form表单数据*/
      form: {
        name: '',
        qr_code_id: 0,
        qr_code: '',
        bg_image: '',
        bg_image_id: 0,
        region_id:[]
      },
      loading: false,
      upload_type: "qr_code",
      regions: []
    };
  },
  created() {
    this.form.welfare_officer_id = this.$route.query.welfare_officer_id;
    this.getData();
  },
  methods: {
    getData() {
      let self = this;
      OfficerApi.toEditOfficer({
        welfare_officer_id: self.form.welfare_officer_id
      }, true)
        .then(res => {
          self.form = formatModel(self.form, res.data.model);
          if (res.data.model.qr_code) {
            self.form.qr_code = res.data.model.qr_code.file_path;
          }
          if (res.data.model.bg_image) {
            self.form.bg_image = res.data.model.bg_image.file_path;
          }
        })
        .catch(error => {

        });
    },
    openUpload(e) {
      this.upload_type = e;
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      this.isupload = false;
      console.log(e[0]);
      if (e != null && e.length > 0) {
        if (this.upload_type == 'qr_code') {
          this.form.qr_code = e[0].file_path;
          this.form.qr_code_id = e[0].file_id;
        }
        if (this.upload_type == 'bg_image') {
          this.form.bg_image = e[0].file_path;
          this.form.bg_image_id = e[0].file_id;
        }
      }
    },


    /*添加广告*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          OfficerApi.editOfficer(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: data.msg,
                type: 'success'
              });
              self.$router.push('/welfare/welfare');
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*取消添加，返回广告列表*/
    cancelFunc() {
      this.$router.back();
    }
  }
};
</script>

<style>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.ql-editor {
  height: 400px;
}
</style>
